<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>insect-catch-game</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="tab-container" class="tab-container">
        <div class="tab-item active" data-value="en">en</div>
        <div class="tab-item" data-value="zh">zh</div>
    </div>
    <div class="screen">
        <h1 id="firstTitle">Catch The Insect</h1>
        <button id="play" class="btn play">Play Game</button>
    </div>
    <div class="screen">
        <h2 id="secondTitle">What is your "favorite" insect?</h2>
        <ul id="inspect-list" class="inspect-list">
            <li>
                <div class="choose-btn">
                    <p>Fly</p>
                    <img src="./images/fly.png" alt="fly">
                </div>
            </li>
            <li>
                <div class="choose-btn">
                    <p>mosquito</p>
                    <img src="./images/mosquito.png" alt="mosquito" />
                </div>
            </li>
            <li>
                <div class="choose-btn">
                    <p>spider</p>
                    <img src="./images/spider.png" alt="spider" />
                </div>
            </li>
            <li>
                <div class="choose-btn">
                    <p>roach</p>
                    <img src="./images/roach.png" alt="roach" />
                </div>
            </li>
        </ul>
    </div>
    <div class="screen game-container" id="game-container">
        <h3 id="time" class="time">Time:<span>00:00</span></h3>
        <h3 class="score" id="score">Score:<span>0</span></h3>
        <h5 id="message" class="message">
            Tell you a bad news, will you be angry? <br>
            Actually you are playing a game that never ends!!
            <button class="btn continue-btn" id="continue">Continue Play</button>
            <button class="btn restart-btn" id="restart">Restart Play</button>
        </h5>
    </div>
</body>
<script src="./data.js"></script>
<script src="./script.js"></script>
</html>